<template>
  <scroll-view scroll-y class="album_view" @scrolltolower="handleToLower">
    <view class="swiper_banner">
      <swiper autoplay indicator-dots circular>
        <swiper-item v-for="item in bannerList" :key="item.id">
          <image :src="item.thumb"></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="album_list">
      <navigator
        class="album_item"
        v-for="item in albumList"
        :key="item.id"
        :url="`/pages/album/index?id=${item.id}`"
      >
        <view class="album_img">
          <image mode="aspectFill" :src="item.cover"></image>
        </view>
        <view class="album_info">
          <view class="album_name">{{ item.name }}</view>
          <view class="album_desc">{{ item.desc }}</view>
          <view class="album_btn"> + 关注 </view>
        </view>
      </navigator>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      bannerList: [],
      albumList: [],
      params: {
        limit: 10,
        order: "hot",
        skip: 0,
      },
      hasMore: true,
    };
  },
  mounted() {
    uni.setNavigationBarTitle({ title: "专辑" });
    this.getList();
  },
  methods: {
    getList() {
      this.request({
        url: "http://157.122.54.189:9088/image/v1/wallpaper/album",
        data: this.params,
      }).then((res) => {
        if (this.bannerList.length === 0) {
          this.bannerList = res.res.banner;
        }
        if (res.res.album === 0) {
          this.hasMore = false;
          return;
        }
        this.albumList = [...this.albumList, ...res.res.album];
      });
    },
    handleToLower() {
      if (this.hasMore) {
        this.params.skip += this.params.limit;
        this.getList();
      } else {
        uni.showToast({
          title: "已是最后一页",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss">
.swiper_banner {
  swiper {
    height: calc(100vw / 2.3);
    
      image {
        height: 100%;
      }
  }
}
.album_list {
  padding: 10rpx;
  .album_item {
    padding: 10rpx 0;
    display: flex;
    border-bottom: 1rpx solid #ccc;
    .album_img {
      flex: 1;
      padding: 10rpx;
      
      image {
        width: 200rpx;
        height: 200rpx;
      }
    }

    .album_info {
      flex: 2;
      margin-left: 20rpx;
      .album_name {
        color: #000;
        font-size: 32rpx;
      }

      .album_desc {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }

      .album_btn {
        padding: 10rpx;
        margin-right: 10rpx;
        margin-top: 10rpx;
        color: #d52a7e;
        border: 1rpx solid currentColor;
        float: right;
      }
    }
  }
}
.album_view {
  height: calc(100vh - 36px);
}
</style>